<template>
    <transition name="animate__animated animate__bounce" appear enter-active-class="animate__zoomIn" leave-active-class="animate__zoomOut" >
        <li>
            <label>
                <!-- 动态决定标签属性 -->
                <input type="checkbox" :checked="todo.done" @click="handleCheck(todo.id)" />
                <!-- 如下代码也能实现功能，但不太推荐，因为有点违反规则修改了props -->
                <!-- <input type="checkbox" v-model="todo.done" /> -->
                <span v-show="!todo.isEdit">{{ todo.title }}</span>
                <input v-show="todo.isEdit" type="text" :value="todo.title" @blur="handleBlur(todo, $event)" ref="inputTitle">
                <!-- blur/*失去焦点 */ -->
            </label>
            <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
            <button v-show="!todo.isEdit" class="btn btn-edit" @click="handleEdit(todo)">编辑</button>
        </li>
    </transition>
</template>

<script>
import 'animate.css'
export default {
    name: 'MyItem',
    //声明接收todo对象
    props: ['todo',],
    data() {
        return {
            newValue: ''
        }
    },
    methods: {
        //勾选or取消勾选
        handleCheck(id) {
            //通知App组件将对应的todo对象的done对象取反
            // this.checkTodo(id)
            this.$bus.$emit('checkTodo', id)
        },
        //删除
        handleDelete(id) {
            if (confirm('确定删除吗?')) {
                console.log(id);
                // this.deleteTodo(id)
                this.$bus.$emit('deleteTodo', id)
            }
        },
        //编辑
        handleEdit(todo) {
            if (todo.hasOwnProperty('isEdit')) {
                // todo上有isEdit
                console.log("有isEdit");
                todo.isEdit = true
            }
            else {
                // todo上没有isEdit
                console.log("没有isEdit");
                this.$set(todo, 'isEdit', true)
            }
            this.$nextTick(function () {
                //由于vue刷新页面是整个方法体执行完毕后重新加载，所以立即获取焦点会失效，此官方api可以在下一轮调用,当页面更新完毕后，调用获取焦点方法
                this.$refs.inputTitle.focus()//得到焦点
            })

        },
        //失去焦点修改完成
        handleBlur(todo) {
            todo.isEdit = false
            // this.$bus.$emit('updateTodo', todo.id, e.target.value)
            if (!this.$refs.inputTitle.value.trim()) { return alert('输入不能为空') }
            else {
                this.$bus.$emit('updateTodo', todo.id, this.$refs.inputTitle.value)
            }
        }
    },

}
</script>

<style scoped>
/*item*/
li {
    list-style: none;
    height: 36px;
    line-height: 36px;
    padding: 0 5px;
    border-bottom: 1px solid #ddd;
}

li label {
    float: left;
    cursor: pointer;
}

li label li input {
    vertical-align: middle;
    margin-right: 6px;
    position: relative;
    top: -1px;
}

li button {
    float: right;
    display: none;
    margin-top: 3px;
}

li:before {
    content: initial;
}

li:last-child {
    border-bottom: none;
}

li:hover {
    background-color: #aad8fe;
}

li:hover button {
    display: block;
}

</style>